<template>
  <div class="classcenter_detail">
    <Home_header :settings="config.setting"  :showtop="false"></Home_header>
    <div class="main_classcenter_detail">
      <div class="banner" v-for="(item,index) in headerBanner.data">
        <a :href="item.link" target="_blank"><img :src="item.image" alt/></a>
      </div>
      <div class="width_all current-location">

			<p class="width_main">
        位置：<nuxt-link to="/">华章官网</nuxt-link>&gt;
        <nuxt-link to="/classcenter">课程中心</nuxt-link>&gt;
        <span style="color: #75ad70">{{course.name}}</span></p>
		</div>
    <div class="life">
      <h1>{{course.name}}</h1>
      <div class="life_con">
        <div class="one_hh">
          <img :src="course.image" alt="">
        </div>
        <div class="life_two">
          <p>开班时间: <strong>{{course.start_at}}</strong></p>
          <p>教学点: <strong>{{course.points}}</strong></p>
          <p>已关注:  <strong id="stromn">{{course.followed}}</strong>人 </p>
          <button class="apply-form" @click="centerDialogVisible = true">预约试听</button>
        </div>
         <div class="life_two">
          <p>上课时段:  <strong>{{course.work_time}}</strong></p>
          <p>课程价格:  <strong style="cursor:pointer;" @click="ask" >点击咨询</strong></p>
          <p>咨询电话:  <strong class="stromn">{{course.phone}}</strong></p>
           <nuxt-link class="apply-forms" to="/classcenter">查看更多</nuxt-link>
        </div>
      </div>
    </div>
     <div style="display: flex;width: 1200px;margin: auto;">
      <div v-html="course.content" class="detai_class">
      </div>
      <div class="right_ll">
        <div class="tui_v">
          <p> <strong></strong> 推荐课程</p>
        </div>
        <div class="kl_po">
          <div v-for="item in hotclass.data" class="img_kl">
            <nuxt-link target="_blank" :to="{path:'/classcenter/detail',query:{id:item.id}}">
              <img :src="item.image" alt>
              <p class="ppo_x">{{item.name}}</p>
            </nuxt-link>
          </div>

           <div class="xuanfu_con">
                <p>申请试听课程</p>
                <i></i>
                <span>只要一个电话<br>我们免费为您回电</span>
                <input v-model="name" type="text" name="name" id="names" placeholder="输入您的姓名">
                <input v-model="phone" type="text" name="mobile" id="mobiles"  placeholder="请输入手机号">
                <input style="text-align: center" @click="freebtn(name,phone)" value="申请试听" id="sub2">
            </div>
        </div>
      </div>
     </div>
      <el-dialog
        title="预约试听"
        :visible.sync="centerDialogVisible"
        center>
        <span>
           <el-input style="margin-bottom: 15px" placeholder="输入您的姓名"  v-model="name"></el-input>

           <el-input placeholder="输入您的手机号" v-model="phone"></el-input>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="freebtn(name, phone)">确 定</el-button>
     </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
    import Home_header from '../../components/Home-header'

    export default {
        name: 'detail',
        components: {
            Home_header,
        },
        async asyncData({app,query}){
            //更多类型
            let config = await app.$apiconfig();
            //banner
            let headerBanner = await app.$apiGet('banners', {cate_id: 22})
            //右侧分类
                let hotclass = await app.$apiGet("hotcourses", {
      page: 1,
      limit: 5
    });
            return {
                hotclass,
                headerBanner,
                config,
                query,
                course:'',
            }
        },
        data(){
            return{
                name:'',
                phone:'',
                classdetail:'',
                centerDialogVisible:false,
            }
        },
        head() {
            return this.config.header;
        },
        created() {

            this.$apiGet('hotcoursedetail',{id:this.query.id}).then(res=>{
                console.log(res)
                this.course = res.data
            });
        },
        methods:{
             ask(){
                window.open('http://p.qiao.baidu.com/cps/chat?siteId=13067632&userId=24620165','_blank','width=800,height=600,menubar=no,toolbar=no,status=no,scrollbars=yes')
            },
            freebtn(n, p) {
                if (!n) {
                    this.$message.error('请输入姓名');
                    return false
                }
                if (!(/^1[3456789]\d{9}$/.test(p))) {
                    this.$message.error('请输入正确的手机号码');
                    return false
                }
                console.log(n, p)
                this.$apiPost('addsignlog', {
                    type_id: 4,
                    name: n,
                    phone: p,
                    activity_id:this.query.id,
                }).then(res => {
                    console.log(res)
                    if (res.code == 1) {
                        this.centerDialogVisible = false;
                        this.$message.success('提交成功');
                    } else {
                        this.centerDialogVisible = false;
                        this.$message.error(res.msg)
                    }
                })
            },
        }
    }
</script>

<style scoped>
.xuanfu_con #sub2 {
    background-color: #f2445d;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
    border: 0px solid #fff;
}
.xuanfu_con #mobiles {
    background-color: #FFFFFF;
    box-sizing: border-box;
    height: auto;
    line-height: 40px;
    padding-left: 20px;
    width: 100%;
    border-radius: 5px;
    margin-top: 14px;
    margin-bottom: 14px;
    border: 0px solid #fff;
}
.xuanfu_con #names {
    background-color: #FFFFFF;
    height: auto;
    line-height: 40px;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 0px solid #fff;
    border-radius: 5px;
}
.xuanfu_con span {
    text-align: center;
    font-size: 14px;
    color: #b4b9c1;
    line-height: 30px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}
.xuanfu_con i {
    display: block;
    width: 20px;
    height: 4px;
    background-color: #f2445d;
    margin: 20px auto;
}
.xuanfu_con p {
    display: block;
    text-align: center;
    font-size: 26px;
    color: #FFFFFF;
}
.xuanfu_con {
    width:250px;
    height: 368px;
    padding: 20px 15px;
    background: url(../../assets/img/ly_bg.jpg)no-repeat;
    box-sizing: border-box;
}
.ppo_x {
  font-size: 16px;
  box-sizing:border-box;
  padding:5px;
}
.img_kl img {
  width:100%;
}
.kl_po {
  display:flex;
  flex-direction: column;
}
.img_kl:hover .ppo_x {
  color:#068BF2;
}
.img_kl {
  display: inline-block;
  margin-bottom:10px;
  margin-top:20px;
}
.tui_v p  {
  display:flex;
  align-items: center;
  margin-top:10px;
  font-size: 18px;
}
.tui_v p strong {
  width:10px;
  height:30px;
  background: #fb5772;
  display: inline-block;
  margin-right:5px;
}
.tui_v {
  color:#fb5772;
  font-size:18px;

}
  .right_ll {
    width: 20%;
  }
  .detai_class{
    width: 75%;
    margin:0px;
    margin-right:5%;
  }

#zhuan_c {
  font-size: 14px;
  color: #666;
  font-weight:400;
}
.from_con p {
      font-size: 20px;
    color: #000;
    font-weight: 500;
}
.svg_jj svg {
  margin-right:5px;
}
.from_con {
position: absolute;
    left: -315px;
    top: 50%;
    height: 90%;
    width: 300px;
    background: #fff;
    z-index: 999;
    margin-top: -45%;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    display: none;
}
.likm {
  display: none;
}
.zaixian_m span {
    font-size: 16px;
    color: #fff;
    display: block;
    text-align: center;
    margin-top:10px;
}
.zaixian_m img {
  margin-top: 10px;
}
.svg_jj {
  display:flex;
  align-items: center;
}
.zaixian_k img {
  margin-top:10px;
}
.zaixian_k {
  position:relative;
  cursor: pointer;
  width:100%;
  height: 80px;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #068BF2;
  flex-direction: column;
  transition: all 0.5s ease;
}
.zaixian_k:hover img {
  display: none;
   transition: all 0.5s ease;
}
.zaixian_k:hover .likm {
  display: inline-block;
  transition: all 0.5s ease;
}
.zaixian_k:hover span {
  color:#068BF2;
  transition: all 0.5s ease;
}
.zaixian_k:hover .from_con {
  display: block;
  transition: all 0.5s ease;
}
.zaixian_k:hover {
  background: #fff;
  transition: all 0.5s ease;
}
.zaixian_k img {
  margin-top:10px;
}
.zaixian_k span {
    font-size: 16px;
    color: #fff;
    display: block;
    text-align: center;
    margin-top:10px;
}
.zaixian_m {
  cursor: pointer;
  width:100%;
  height: 80px;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FF3F5A;
  flex-direction: column;
}
.cedao_c {
  position: fixed;
  top:50%;
  right:0px;
  margin-top:-120px;
  width: 85px;
  height:240px;
  background: pink;
}
.apply-forms:hover {
   box-shadow: 0px 0px 13px #333333;
   transition: all 300ms ease;
}
.apply-forms {
    display: block;
    width: 225px;
    height: 50px;
    background-color: #fa7267;
    line-height: 50px;
    text-align: center;
    color: #FFFFFF !important;
    font-size: 16px;
    margin-top:60px;
    border:0px solid #000!important;
}
.stromn {
  color:#fb5746;
}
#zixun_x {
  color:#fb5746;
}
.apply-form:hover {
    box-shadow: 0px 0px 13px #333333;
    transition: all 300ms ease;
}
.apply-form {
    display: block;
    width: 225px;
    height: 50px;
    background-color: #ff3f5a !important;
    line-height: 50px;
    text-align: center;
    color: #FFFFFF !important;
    font-size: 16px;
    margin-top:60px;
    border:0px solid #000!important;
}
#stromn {
  color:#fb5746;
}
.one_hh {
  margin-right: 68px;
}
.life_two p i {
  color:#000;
}
.life_two p {
  margin-bottom: 28px;
  font-size: 16px;
  color: #666;
}
.life_two {
  width: 326px;
  height: auto;
}
.life_con {
  width: 100%;
  display: flex;
}
.life h1 {
    font-size: 32px;
    color: #32363d;
    font-weight: normal;
    width: 1200px;
    margin: 0px auto 30px auto;
}
.life {
  width: 1200px;
  height: auto;
  margin: auto;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 30px 0;
  box-sizing: border-box;
}
.banner {
  font-size: 0px;
}
.banner img {
  width: 100%;
}
.current-location {
    height: 50px;
    line-height: 50px;
    color: #000000;
    padding: 0;
}
.width_all {
    width: 100%;
    margin: 0 auto;
}
.current-location > p {
    font-size: 16px;
    color: #333;
}
.width_main {
    width: 1200px;
    margin: 0 auto;
}
.current-location {
    height: 50px;
    line-height: 50px;
    color: #000000;
    padding: 0;
}
.current-location {
    height: 38px;
    line-height: 38px;
    background-color: #f7f9fb;
}
  @media (max-width: 1300px){
    .main_classcenter_detail{
      width: 100%;
      overflow: hidden;
    }
    .life{
      width: 95%;
    }
    .detai_class{
      width: 90%;
    }
    .detai_class img{
      max-width: 100%!important;
      height: auto!important;
    }

  }
  @media (max-width: 900px){
.width_main{
  padding: 0 15px;
}
    .life h1{
      font-size: 18px;
    }
    .life_con {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .one_hh{
      width: 80%;
      margin: auto;
    }
    .life_two {
      width: 80%;
      margin:10px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

    }
    .apply-forms,.apply-form{
      margin-top: 10px;
      border:0px solid #000!important;
    }
    .one_hh img{
      width: 100%;
    }
    .current-location > p {
    width: 95%;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  .current-location > p >span {
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  }
</style>
